<template>
  <div class="song-list page">
    <ul>
      <li
        class="item"
        v-for="(item, index) in dataSounce"
        :key="item.id"
        @click="getSong(index)"
      >
        <p class="index">{{ index + 1 }}</p>
        <div class="content">
          <h3 class="name">{{ item.name }}</h3>
          <p class="info">
            <span>{{ item.ar }}</span>
            <span> - </span>
            <span>{{ item.al.name }}</span>
          </p>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dataSounce: [],
    };
  },
  created() {
    this.getSongList();
  },
  methods: {
    async getSongList() {
      // this.$http.get('http://localhost:3000/artists?id=7424').then(data =>{
      //     console.log('请求成功！')
      //     console.log(data);
      // })
      // .catch(err=>{
      //     console.log('请求失败')
      //     console.log(err);
      // })
      const { data: res } = await this.$http.get(
        "http://localhost:3000/artists?id=7424"
      );
      // console.log(res)
      console.log(res.hotSongs);
      // 过滤数据
      const newData = res.hotSongs.map((item) => ({
        id: item.id,
        name: item.name,
        ar: item.ar.map((aritem) => aritem.name).join("/"), //歌手信息
        al: {
          //专辑信息
          name: item.al.name,
          picUrl: item.al.picUrl,
        },
      }));
      console.log(newData);
      this.dataSounce = newData;
    },
    getSong(index) {
      // console.log(this.dataSounce);
      // console.log(index)
      // 将用户点击的歌曲下标传递给store
      this.$store.commit({
        type: "Player/selectSongByIndex",
        index: index,
        list: this.dataSounce,
      });
    },
  },
};
</script>

<style scoped>
.song-list {
  width: 100%;
  height: 100%;
  overflow: auto;
  box-sizing: border-box;
}
.item {
  border-bottom: 1px solid #eee;
  display: flex;
  padding: 10px;
}
.index {
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  font-size: 16px;
}
.content {
  flex: 1;
  display: flex;
  height: 40px;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
}
.name {
  font-size: 16px;
  font-weight: normal;
}
.info {
  margin-top: 5px;
  font-size: 12px;
  color: #666;
}
</style>